﻿/// <reference path="uicontrol.ts" />

module UI {

    export class ButtonStrip extends UIControl {

        public type: string = 'ButtonStrip';

        public orientation: string = 'horizontal';

        public items: Array<ListBoxItem> = [];

        public selectedIndex: number = 0;

        public buttonWidth: number = 120;

        public buttonHeight: number = 24;

        public buttonMargin: number = 2;

        public onClick: InputEvent = null;

        public onEnter: InputEvent = null;

        public onExit: InputEvent = null;

        public onSelectionChanged: SelectionChangedEvent = null;

        constructor(details: any = undefined) {
            super();
            setupControl(this, details);
            this.handleClick = this.handleClickInternal;
        }

        selectItemByText(text: string) {
            for (var i = 0; i < this.items.length; i++) {
                var item = this.items[i];                
                if (item.text == text) {
                    var oldSelectedIndex = this.selectedIndex;
                    this.selectedIndex = i;
                    if (i != oldSelectedIndex && this.onSelectionChanged !== undefined && this.onSelectionChanged !== null) {
                        var args = SelectionChangedArgs.create(this.selectedIndex, this.items[this.selectedIndex]);
                        this.onSelectionChanged(this, args);
                    }
                    break;
                }
            }
        }

        render(context: CanvasRenderingContext2D) {

            var c = this.computed;

            // Set up text rendering
            context.textBaseline = 'middle';
            context.textAlign = 'left';
            context.font = UI.FONT_NORMAL;

            // Draw the buttons        
            var buttonLeft = c.left;
            var buttonTop = c.top;
            for (var i = 0; i < this.items.length; i++) {
                context.fillStyle = '#000';
                context.fillRect(buttonLeft, buttonTop, this.buttonWidth, this.buttonHeight);
                context.fillStyle = i == this.selectedIndex ? '#fff' : '#aaa';
                context.fillRect(buttonLeft + this.buttonMargin, buttonTop + this.buttonMargin, this.buttonWidth - this.buttonMargin * 2, this.buttonHeight - this.buttonMargin * 2);
                context.fillStyle = '#000';
                context.fillText(this.items[i].text, buttonLeft + this.buttonMargin * 2, buttonTop + this.buttonHeight / 2);
                if (this.orientation == 'horizontal') {
                    buttonLeft += this.buttonWidth + this.buttonMargin;
                } else {
                    buttonTop += this.buttonHeight + this.buttonMargin;
                }
            }

        }

        handleClickInternal(sender: UIControl, e: InputArgs) {
            var c = this.computed;
            var oldSelectedIndex = this.selectedIndex;
            this.selectedIndex = this.orientation == 'horizontal'
            ? c.mouse.x / (this.buttonWidth + this.buttonMargin)
            : c.mouse.y / (this.buttonHeight + this.buttonMargin);
            this.selectedIndex = Math.max(0, Math.min(this.items.length - 1, Math.floor(this.selectedIndex)));
            if (this.selectedIndex != oldSelectedIndex && this.onSelectionChanged !== undefined && this.onSelectionChanged !== null) {
                var args = SelectionChangedArgs.create(this.selectedIndex, this.items[this.selectedIndex]);
                this.onSelectionChanged(this, args);
            }
        }

    }

}